<template>
	<view>
		<navigator url="../../pages/atlas/atlas">
			<image class="cleaning_imgBox" src="../../static/images/lrx/chargedetail@3x.png"></image>
		</navigator>
		<view class="cleaning_box">
			<view class="cleaning_bt">
				{{storehome.shopName}}
			</view>
			<view>营业时间：
			<text v-if="storehome.startTime != null">{{storehome.startTime}}~{{storehome.endTime}}</text>
			<text v-if="storehome.startTime == null">8:00~10:00</text>
			</view>
			<view class="cleaning_bq">
				免费wifi
			</view>
			<view class="cleaning_zx"></view>
			<view class="cleaning_wz">
				<view class="cleaning_dz">
					<view>{{storehome.address}}</view>
					<view class="cleaning_jl" v-if="storehome.distance != unll">
						距离您{{storehome.distance}}km
					</view>
					<view class="cleaning_jl" v-if="storehome.distance == unll">
						距离您3.4km
					</view>
				</view>
				<view class="cleaning_box5">
					<image class="cleaning_tb" src="../../static/icons/ymy/icon_dt.png"></image>
					<view class="cleaning_text2">地图</view>
				</view>
				<view class="cleaning_box5">
					<image class="cleaning_tb" src="../../static/icons/ymy/icon_sj.png"></image>
					<view class="cleaning_text2">电话</view>
				</view>
			</view>
		</view>
		<view class="box">
			<!-- 上面动态切换 -->
			<view class="title-view">
				<text :class="{buttonActive: switchBtnTab ===0}" @click="switchCurve(0)" class="iten">
					服务
				</text>
				<text :class="{buttonActive: switchBtnTab ===1}" @click="evaluation(6)" class="iten">
					评论
				</text>
			</view>
			<!-- 下面滑块 -->
			<view>
				<view class="text" v-show="switchBtnTab == 0">
					<view class="cleaning_textBox"><text class="cleaning_hx"></text>清洗服务<texte class="cleaning_hx">
						</texte>
					</view>
					<view v-for="item in store" :key="item">
						<view class="item">
							<view class="cleaning_box1">
								<view>
									<image v-if="item.img == null" class="cleaning_img1" src="../../static/images/ymy/A31/image_qcfw1.png">
									</image>
									<image v-if="item.img != null" class="cleaning_img1" src="item.img">
									</image>
								</view>
								<view class="cleaning_box4">
									<view class="cleaning_text1">
										{{item.name}}
									</view>
									<view v-if="item.desc != null" class="cleaning_text3">
										{{item.desc}}
									</view>
									<view v-if="item.desc == null" class="cleaning_text3">
										对普通家用汽车进行人工全方位清洗
									</view>
									<view>
										<view class="cleaning_box2">
											<view class="cleaning_box2_pf">评分：4.2</view>
											<view>今日仅剩<text class="number">10</text>次</view>
										</view>
										<view class="cleaning_box3">
											<view class="cleaning_text">
												<view><text class="cleaning_textq">￥</text>{{item.price}}</view>
												<!-- <view class="cleaning_bq">会员8折</view> -->
											</view>
											<!-- <navigator class="cleaning_button" @click="buy">购买</navigator> -->
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="text" v-show="switchBtnTab == 1">
					<view v-for="item in remark" :key="item">
						<view class="item">
							<view class="cleaning_box1">
								<view>
									<image v-if="item.img == null" class="cleaning_img2" src="../../static/images/fq/dl.png">
									</image>
									<image v-if="item.img != null" class="cleaning_img2" src="item.img">
									</image>
								</view>
								<view class="cleaning_box4">
									<view class="cleaning_text1">
										<text>{{item.name}}</text>
										<view class="img_xx">
											<image class="xx_img" src="../../static/icons/ymy/icon_xq_xx.png" mode="">
											</image>
											<image class="xx_img" src="../../static/icons/ymy/icon_xq_xx.png" mode="">
											</image>
											<image class="xx_img" src="../../static/icons/ymy/icon_xq_xx.png" mode="">
											</image>
											<image class="xx_img" src="../../static/icons/ymy/icon_xq_xx.png" mode="">
											</image>
											<image class="xx_img" src="../../static/icons/ymy/icon_xq_xx.png" mode="">
											</image>
										</view>
									</view>
									<view class="cleaning_text3">
										大众捷达
									</view>
									<view v-if="item.content != undefined">
										{{item.content}}
									</view>
									<view v-if="item.content == undefined">
									这次洗车体验不错，服务好环境好，下次一定
									</view>
									<view>
										<view class="cleaning_box2">
											<view class="cleaning_box2_pf">
												<text>{{item.createTime}}</text>
												<text>回复</text>
											</view>
											<view class="caer_box">
												<image class="caer" v-show="caer == false" @click="caer = true"
													src="../../static/images/lrx/Button_likesgray@3x.png" mode="">
												</image>
												<image class="caer" v-show="caer == true" @click="caer = false"
													src="../../static/images/lrx/Button_likesred@3x.png" mode="">
												</image>
												<tex>10</tex>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
						<view class="text_zx"></view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		createNamespacedHelpers
	} from "vuex";
	let {
		mapState,
		mapActions
	} = createNamespacedHelpers("carBeauty");
	export default {
		data() {
			return {
				caer: false,
				goodlist: {
					userId: '',
					serviceInfoId: 0,
					serviceInfoName: 0,
					totalPrice: '',
					serviceInfoImg: '',
				},
				currentIndex: 0,
				switchBtnTab: 0,
				remark: [],
				amapPlugin: null,
				key: '这里填写高德开放平台上申请的key',
			}
		},
		mounted() {
			
		},
		onLoad() {
			this.amapPlugin = new amap.AMapWX({
				key: this.key
			});
		},
		computed: {
			...mapState(["store", "storehome"])
		},
		methods: {
			...mapActions(["getEvaluation","postBuy"]),
			switchCurve(index) {
				this.switchBtnTab = index
			},
			//店铺
			async evaluation(id) {
				this.switchCurve(1);
				const data = await this.getEvaluation(id);
				console.log(data);
				this.remark = data;
			},
			//购买
			async buy() {
				const goos = this.storehome
				const _id = uni.getStorageSync('id')
 				this.goodlist.userId = _id;
				this.goodlist.serviceInfoId = goos.id;
				this.goodlist.serviceInfoName = goos.name;
				this.goodlist.totalPrice = goos.price;
				this.goodlist.serviceInfoImg = goos.img;
				const data = await this.postBuy(this.goodlist);
				if (data.result == true) {
					uni.navigateTo({
						url: '/pages/serviceOeder/serviceOrder'
					})
				}
			},
			getRegeo() {
				uni.showLoading({
					title: '获取信息中'
				});
				this.amapPlugin.getRegeo({
					success: (data) => {
						console.log(data)
						this.addressName = data[0].name;
						uni.hideLoading();
					}
				});
			}
		}
	}
</script>

<style>
	.cleaning_imgBox {
		display: block;
		width: 750rpx;
		background-color: #007AFF;
	}

	.cleaning_box {
		padding: 40rpx;
		width: 750rpx;
		height: 310rpx;
		background-color: #ffffff;
		box-shadow: 0rpx 6rpx 12rpx 0rpx rgba(103, 103, 103, 0.16);
		border-radius: 20rpx;
		box-sizing: border-box;
		position: absolute;
		top: 370rpx;
	}

	.cleaning_zx {
		width: 670rpx;
		height: 0rpx;
		border: solid 1rpx #dadada;
		margin: 10rpx 0;
	}

	.cleaning_bt {
		width: 308rpx;
		height: 60rpx;
		font-family: PingFang SC;
		font-size: 44rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 60rpx;
		letter-spacing: 0rpx;
		color: rgba(0, 0, 0, 1);
	}

	.cleaning_text2 {
		width: 40rpx;
		height: 28rpx;
		font-family: PingFang SC;
		font-size: 20rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 28rpx;
		letter-spacing: 0rpx;
		color: rgba(74, 74, 74, 1);
	}

	.cleaning_bq {
		width: 120rpx;
		border-radius: 4rpx;
		border: solid 2rpx #a5a5a5;
		height: 28rpx;
		font-family: PingFang SC;
		font-size: 20rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 23rpx;
		letter-spacing: 0rpx;
		color: #444444;
		padding: 0 5rpx;
		text-align: center;
	}

	.cleaning_wz {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.cleaning_box5 {
		width: 80rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}

	.cleaning_text1 {
		display: flex;
		align-items: center;
		height: 40rpx;
		font-family: PingFang SC;
		font-size: 28rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 40rpx;
		letter-spacing: 0rpx;
		color: rgba(74, 74, 74, 1);
	}

	.cleaning_text3 {
		font-family: PingFang SC;
		font-size: 20rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 28rpx;
		letter-spacing: 0rpx;
		color: rgba(183, 183, 183, 1);
	}

	.cleaning_dz {
		display: flex;
		flex-wrap: wrap;
	}

	.cleaning_tb {
		width: 80rpx;
		height: 80rpx;
	}

	.cleaning_box6 {
		background-color: #FFFFFF;
		margin-top: 200rpx;
	}

	.title-view {
		display: flex;
	}

	.text-view {
		flex-grow: 1;
		line-height: 80rpx;
		text-align: center;
	}

	.active {
		border-bottom: 5rpx solid #5992BD;
	}

	.cleaning_textBox {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 20rpx 0;
		font-family: PingFang SC;
		font-size: 28rpx;
		font-weight: normal;
		font-stretch: normal;
		letter-spacing: 0rpx;
		color: rgba(75, 75, 75, 1);
	}

	.cleaning_hx {
		display: block;
		margin: 0 10rpx;
		width: 196rpx;
		height: 0rpx;
		border: solid 1rpx rgba(216, 216, 216, 1);
	}

	.box {
		background-color: #FFFFFF;
		margin-top: 200rpx;
	}

	.cleaning_box1 {
		width: 670rpx;
		height: 146rpx;
		display: flex;
		margin: 0 40rpx;
	}

	.cleaning_img1 {
		width: 132rpx;
		height: 132rpx;
	}

	.cleaning_box4 {
		width: 604rpx;
		padding-left: 20rpx;
	}

	.cleaning_box2 {
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-family: PingFang SC;
		font-size: 20rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 28rpx;
		letter-spacing: 0rpx;
		color: rgba(74, 74, 74, 1);
	}

	.cleaning_box2_pf {
		margin-right: 20rpx;
	}

	.number {
		color: rgba(246, 17, 17, 1);
	}

	.cleaning_text {
		width: 68rpx;
		height: 56rpx;
		font-family: PingFang SC;
		font-size: 40rpx;
		font-weight: normal;
		letter-spacing: 0rpx;
		color: rgba(238, 21, 21, 1);

	}

	.cleaning_textq {
		font-size: 20rpx;
		line-height: 56rpx;
	}

	.cleaning_box3 {
		display: flex;
		justify-content: space-between;
	}

	.cleaning_button {
		width: 140rpx;
		height: 48rpx;
		background-color: #f5610c;
		border-radius: 24rpx;
		font-family: PingFang SC;
		font-size: 20rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 48rpx;
		letter-spacing: 0rpx;
		color: #ffffff;
		text-align: center;
	}

	.iten {
		height: 44rpx;
		font-family: PingFang SC;
		font-size: 32rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 11rpx;
		letter-spacing: 0rpx;
		color: #4a4a4a;
		padding: 36rpx 0;
	}

	.item {
		background-color: #FFFFFF;
		margin-bottom: 20rpx;
		padding-top: 20rpx;
	}

	.buttonActive {
		border-bottom: 4rpx solid #f5610c;
		border-radius: 4rpx;
	}

	.commets_swiper {
		background-color: #FFFFFF;
		height: 100vh;
	}

	.commets_bt {
		margin: 20rpx 0 0 30rpx;
	}

	.commets_img {
		width: 120rpx;
		height: 120rpx;
		background-color: #000000;
	}

	.commets_text_box {
		display: flex;
		margin: 30rpx 30rpx 10rpx 30rpx;
	}

	.commets_text {
		line-height: 30rpx;
		margin: 0 30rpx;
	}

	.commets_spm {
		margin-top: 30rpx;
		font-family: PingFang SC;
		font-size: 20rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 28rpx;
		letter-spacing: 0rpx;
	}

	.title-view {
		display: flex;
		background-color: #FFFFFF;
		margin-bottom: 20rpx;
		justify-content: space-evenly;
	}

	.text-view {
		flex-grow: 1;
		line-height: 80rpx;
		text-align: center;
	}

	.active {
		border-bottom: 5rpx solid #5992BD;
	}

	.commets_pj {
		height: 45rpx;
		text-align: right;
		margin-right: 30rpx;
		line-height: 45rpx;
	}

	.commets_text_pj {
		width: 140rpx;
		height: 48rpx;
		padding: 5rpx 35rpx;
		line-height: 40rpx;
		color: #f5610c;
		border: 1rpx solid #f5610c;
		border-radius: 24rpx;
		font-family: PingFang SC;
		font-size: 20rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 28rpx;
		letter-spacing: 0rpx;
	}

	.img_xx {
		display: flex;
	}

	.xx_img {
		width: 12rpx;
		height: 14rpx;
	}

	.caer_box {
		display: flex;
		align-items: center;
	}

	.caer {
		width: 50rpx;
		height: 50rpx;
	}

	.cleaning_img2 {
		width: 60rpx;
		height: 60rpx;
	}

	.text_zx {
		width: 656rpx;
		height: 0rpx;
		border: solid 1rpx #d4d4d4;
		margin-left: 15rpx;
	}
</style>
